<template>
  <div class="layui-fluid">
    <div class="layui-card">
      <form class="layui-form" action="">
        <input type="hidden" name="id" value="" />
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              id="username"
              type="text"
              v-model="user.username"
              lay-verify="required|username"
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
              maxlength="16"
            />
          </div>
          <label class="layui-input-inline layui-word-aux" style="width: 210px">
            用户名由数字和字母并且开头必须是字母组成（长度为8-16位）
          </label>
        </div>

        <div class="layui-form-item password_div" >
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              id="inp_password"
              type="password"
              v-model="userExt.password"
              lay-verify="password"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input password_div"
              maxlength="30"
            />
          </div>
          <label class="layui-input-inline layui-word-aux" style="width: 210px">
            密码必须由字母、数字、特殊字组成
          </label>
        </div>
        <div class="layui-form-item password_div">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="password"
              v-model="userExt.confirmPassword"
              lay-verify="confirmPass"
              placeholder="请输入确认密码"
              autocomplete="off"
              class="layui-input password_div"
              maxlength="30"
            />
          </div>
          <label class="layui-input-inline layui-word-aux" style="width: 210px">
            再次输入密码
          </label>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">昵称</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="text"
              v-model="user.petName"
              lay-verify="required"
              placeholder="请输入昵称"
              autocomplete="off"
              class="layui-input"
              maxlength="15"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">真实姓名</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="text"
              v-model="userExt.realName"
              lay-verify="required"
              placeholder="请输入真实姓名"
              autocomplete="off"
              class="layui-input"
              maxlength="15"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">身份证号码</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="text"
              v-model="userExt.idCard"
              lay-verify="required|identity"
              placeholder="请输入身份证号码"
              maxlength="18"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">手机号码</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="text"
              v-on:click="showOrgTree"
              v-model="userExt.phone"
              lay-verify="required|phone"
              placeholder="请输入手机号码"
              maxlength="11"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">单位</label>
          <div class="layui-input-inline" style="width: 230px">
            <SelectTree
              ref="selectTree"
              event="showOrgTree"
              :autoLoad="autoLoadTree"
              :treeDataUrl="userOrgHttpUrl"
              :filter="userOrgFilter"
            ></SelectTree>
          </div>
        </div>
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">开启管理员</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="checkbox"
              v-if="user.admin"
              lay-skin="switch"
              checked
              lay-filter="change"
              lay-event="changeAdmin"
              lay-text="开启|关闭"
            />
            <input
              type="checkbox"
              v-if="!user.admin"
              lay-skin="switch"
              lay-filter="change"
              lay-event="changeAdmin"
              lay-text="开启|关闭"
            />
          </div>
        </div> -->
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">绑定微信</label>
          <div class="layui-input-inline" style="width: 230px">
            <input
              type="checkbox" v-if="user.wxId==null"
              lay-skin="switch" disabled
              lay-text="是|否"
            />
            <input
              type="checkbox" v-if="user.wxId!=null" checked
              lay-skin="switch" disabled
              lay-text="是|否"
            />
          </div>
        </div> -->
        <div class="layui-form-item">
          <label class="layui-form-label">授权角色</label>
          <div class="layui-input-block">
            <input
              type="checkbox"
              name="userRole"
              v-for="(item, index) in role"
              v-if="item.checked"
              checked
              :value="item.id"
              :title="item.desc"
            />
            <input
              type="checkbox"
              name="userRole"
              v-for="(item, index) in role"
              v-if="!item.checked"
              :value="item.id"
              :title="item.desc"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <label class="layui-btn" lay-submit="" lay-filter="submitSave"
              >提交保存</label
            >
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import SelectTree from "@/components/common/selectTree";
export default {
  name: "UserEdit",
  components: {
    SelectTree,
  },
  data: function () {
    return {
      userId: "",
      user: {
        org: {},
      },
      userExt: {},
      userOrgHttpUrl: this.userManager + "/userManager/getOrg",
      role: [],
      autoLoadTree: false,
      saveRoles: [],
      isAdmin: false,
      userOrgFilter: "userOrgSelectTree",
    };
  },
  mounted: function () {
    this.userId = this.$route.query.userId;
    if(this.userId){
      $("#username").addClass("layui-disabled");
      $("#username").attr("readonly","readonly");
      $(".password_div").hide();
      
    }else{
      $("#username").removeClass("layui-disabled");
      $("#username").removeAttr("readonly");
      $(".password_div").show();
    }
    this.loadUserEditInfo();
    this.initLayui();

    var that = this;
    layui.use(["form"], function () {
      var form = layui.form;
      //自定义验证规则
      form.verify({
        confirmPass: function (value) {
            if(!this.userId){
              return
            }
          if ($("#inp_password").val() !== value)
            return "提示：两次输入密码不一致！";
        },
      });
      //监听提交
      form.on("submit(submitSave)", function (data) {
        that.save();
        return false;
      });
    });
  },
  updated: function () {
    this.initLayui();
  },
  methods: {
    loadUserEditInfo: function () {
      var that = this;
      if (!this.checkIsNull(this.userId)) {
        this.post(
          this.userManager + "/getUser",
          {
            id: that.userId,
          },
          function (data) {
            if (data.status.code != "000000") {
              that.showMsg(data.status.msg);
              return;
            }
            that.user = data.result.user;
            that.userExt = data.result.userExt;
            that.role = data.result.user.roles;
            //循环设置角色选中
            if (!that.checkIsNull(that.role) && that.role.length > 0) {
              for (var i = 0; i < that.role.length; i++) {
                if (
                  !that.checkIsNull(that.user.roles) &&
                  that.user.roles.length > 0
                ) {
                  for (var j = 0; j < that.user.roles.length; j++) {
                    if (that.role[i].id == that.user.roles[j].id) {
                      that.role[i].checked = true;
                    }
                  }
                }
              }
            }
            that.isAdmin = that.user.admin;
            that.$refs.selectTree.init();
          }
        );
      }
    },
    showOrgTree: function () {
      //在此处设置下拉框显示格式,详细设置按照Ztree文档进行设置
      //如果已经设计请进行忽略
      var that = this;
      var tree = {
        success: function (obj) {
          that.initOrgSelect();
        },
      };
      return tree;
    },
    save: function () {
      if (
        !this.checkPhone(this.user.phone) &&
        !this.checkIsNull(this.user.phone)
      ) {
        this.showMsg("手机号码格式不正确", false);
        return;
      }
      var tree = this.$refs.selectTree;
      // var values = tree.getSelectedNodes(this.userOrgFilter);
      var that = this;
      this.post(
        this.userManager + "/save",
        {
          userId:this.user.id,
          username:this.user.username,
          password:this.user.password,
          petName:this.user.petName,
          userExtId:this.userExt.id,
          realName:this.userExt.realNamel,
          idCard:this.userExt.idCard,
          phone:this.userExt.phone
        },
        function (data) {
          if (data.status.code != "000000") {
            that.showMsg(data.status.msg);
          } else {
            that.openMsg(data.status.msg, true);
            that.closeParentOpen();
          }
        }
      );
    },
    initOrgSelect: function () {
      if (this.checkIsNull(this.user.org.id)) {
        this.initOrgSelect();
      } else {
        var tree = this.$refs.selectTree;
        tree.checkNode(this.userOrgFilter, this.user.org.id);
      }
    },
    changeAdmin: function (data, e) {
      if (data.checked) {
        this.isAdmin = true;
      } else {
        this.isAdmin = false;
      }
    },
  },
};
</script>